<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <div th:replace="comm/page::layui_css"/>
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table id="user-table" lay-filter="user-table-filter"></table>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="roles">角色</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group" style="margin-top: 10px">
        <button lay-event="add_btn" type="button" id="add_btn" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
    </div>
</script>

<div th:replace="comm/page::layui_script"/>
<script th:inline="none">
    layui.use(['table'], function () {
        var $ = layui.jquery;
        var table = layui.table;

        // 渲染表格
        // layer.load(2);
        var userTable = table.render({
            elem: '#user-table',
            url: '/user/list',
            toolbar: '#toolbar',
            page:true,
            cols: [[
                {type: 'numbers', minWidth: 30,},
                {field: 'username', minWidth: 120, title: '用户'},
                {field: 'email', title: '邮箱'},
                {field: 'mobile', title: '手机'},
                {field: 'remark', title: '备注'},
                {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
            ]],
            style: "margin-top:0;"
        });
        window.refreshView = function () {
            userTable.reload();
        };
        //监听工具条
        table.on('tool(user-table-filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                var confirm = layer.confirm('确定要删除？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(confirm);
                    $.post("/user/del", {id: data.id}, function (e) {
                        if (e.code === 0) {
                            layer.msg(e.msg);
                            obj.del();
                        } else {
                            layer.msg(e.msg);
                        }
                    });
                }, function () {
                    layer.close(confirm);
                });

            } else if (layEvent === 'edit') {
                var add_dialog = layer.open({
                    type: 2,
                    title: '用户-编辑',
                    content: '/user/edit.html?id=' + data.id,
                    area: ['80%', '90%'],
                    maxmin: true,
                    shadeClose: true
                });
                layer.full(add_dialog);
            } else if (layEvent === 'roles') {
            var roles_dialog = layer.open({
                type: 2,
                title: '用户-角色管理',
                content: '/user/roles.html?id=' + data.id,
                area: ['60%', '90%'],
                maxmin: false,
                shadeClose: true
            });
        }
        });
        //监听工具条
        table.on('toolbar(user-table-filter)', function (obj) {
            console.log(obj);
            var layEvent = obj.event;
            if (layEvent === 'add_btn') {
                var add_dialog = layer.open({
                    type: 2,
                    title: '用户-新增',
                    content: '/user/add.html',
                    area: ['80%', '90%'],
                    maxmin: true,
                    shadeClose: true
                });
                layer.full(add_dialog);
            }
        });


    });
</script>
</body>
</html>